<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple Sortable Grid</title>

<link href="/M2MJS/style/M2MJsDefault.css" rel="stylesheet" type="text/css" />

<style type="text/css">

	.overContext{
		background-color: #d4b031!important;
	}
	
</style>


<style type="text/css">
	.saveButton{
		width:100px;
		background: transparent;
	}
	.cancelButton{
		width:100px;
		background: transparent;
	}	
</style>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/dateext.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Utils.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/SortDataType.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/SortTypes.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Sort.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/XBrowser.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Connection.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/TemplateLoader.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/ContextMenu.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Page.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/Paginator.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Form.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Model.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Component.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/GridRow.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/Grid.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/GridHeaderCell.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/GridHeader.js"></script>

<script type="text/javascript" src="/M2MJS/js4test/Person.js"></script>


<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/SortTypes.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Sort.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/ContextMenu.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSCommon/Page.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Form.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Model.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSBind/Component.js"></script>

<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/GridRow.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/Grid.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/Paginator.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/GridHeaderCell.js"></script>
<script type="text/javascript" src="/M2MJS/M2MJS/M2MJSGrid/GridHeader.js"></script>

<script type="text/javascript">
var templateLoader;
var personGrid;
var sort;
var gridHeader;
var personGridPaginator;
var personData = new Array();
var viewPersonFormTemplate;
</script>

<script type="text/javascript">
	var formTemplateLoader;
	var viewPersonForm;
	
	function editPerson(){
		formTemplateLoader = new TemplateLoader("/M2MJS/GridTemplates/personForm.html");
		viewPersonFormTemplate = formTemplateLoader.loadTemplate("viewPersonForm");

		
		document.body.appendChild(viewPersonFormTemplate);
		
		viewPersonFormTemplate.style.position = "absolute";
		viewPersonFormTemplate.style.left = "0px";
		viewPersonFormTemplate.style.top = "0px";
		viewPersonFormTemplate.style.width = "90%";
		viewPersonFormTemplate.style.height = "90%";
		
		var viewPersonFormContainer = getElement(document.body, "viewPersonFormContainer");
		var left = (window.innerWidth/2) - parseInt(viewPersonFormContainer.style.width);
		var top = (window.innerHeight/2) - parseInt(viewPersonFormContainer.style.height);
		
		viewPersonFormContainer.style.position = "relative";
		viewPersonFormContainer.style.left = left + "px";
		viewPersonFormContainer.style.top = top + "px";
		viewPersonFormContainer.style.width = "300px";
		viewPersonFormContainer.style.height = "150px";
		
		viewPersonForm = new Form();
		
		viewPersonForm.addComponent(new Component("name", document.getElementById("pname")));
		viewPersonForm.addComponent(new Component("address", document.getElementById("paddress")));
		viewPersonForm.addComponent(new Component("age", document.getElementById("page")));

		viewPersonForm.setModel(new Model(personGrid.getModelObject()));
	}
	
	function viewPerson(){
		alert("View: " + personGrid.getModelObject());
	}
	
	function deletePerson(){
		alert("Delete: " + personGrid.getModelObject());
	}
	
	function savePerson(){
		var dataIndex = ((personGridPaginator.page.currentPage-1) * 10) + personGrid.selectedGridRow.selectedIndex;
		personData[dataIndex] = viewPersonForm.getModel().getObject();
		
		personGrid.setDataList(personData.slice(personGridPaginator.page.getPageBegin()-1, personGridPaginator.page.getPageEnd()));
		personGrid.renderGrid();
		
		document.body.removeChild(viewPersonFormTemplate);
		
	}
	
	function cancelForm(){
		document.body.removeChild(viewPersonFormTemplate);
	}
</script>

<script type="text/javascript">
function init(){
	templateLoader = new TemplateLoader("/M2MJS/GridTemplates/personGrid.html");
	
	/*
	personData.push(new Person("1", "Marcello", "Athens", "40", "6/3/1971"));
	personData.push(new Person("2", "Mary", "Athens", "38", "7/12/1969"));
	personData.push(new Person("3", "Johan", "Berlin", "25", "5/3/1971"));
	personData.push(new Person("4", "John", "London", "27", "4/5/1950"));
	personData.push(new Person("5", "Terry", "Paris", "47", "7/8/1977"));
	*/
	
	
	personData = [
			{id:"1", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"2", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"3", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"4", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"5", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"6", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"7", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"8", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"9", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"10", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"11", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"12", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"13", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"14", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"15", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"16", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"17", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"18", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"19", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"20", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"21", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"22", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"23", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"24", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"25", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"26", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"27", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"28", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"29", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"30", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"31", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"32", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"33", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"34", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"35", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"36", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"37", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"38", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"39", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"40", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"41", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"42", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"43", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"44", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"45", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"46", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"47", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"48", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"},
			{id:"49", name:"Marcello", address: "Athens", age:"40", dateOfBirth:"6/3/1971"},
			{id:"50", name:"Mary", address: "Athens", age:"38", dateOfBirth:"7/12/1969"}
			];


	var page = new Page(personData.length);
	
	page.setLinesPerPage(10);
	  
	
	personGridPaginator = new Paginator(page,
			document.getElementById("firstPage"),
			document.getElementById("previousPage"),
			document.getElementById("nextPage"),
			document.getElementById("lastPage"),
			document.getElementById("currentPage"),
			document.getElementById("totalPages")
			);  
	
		
	var personShowForm = new Form();
	
	
	personGrid = new Grid(personData.slice(personGridPaginator.page.getPageBegin()-1, personGridPaginator.page.getPageEnd()), 
			document.getElementById("personGridContainer"), 
			templateLoader.loadTemplate("personGridRowContainer"));

	personGridPaginator.onPageChange = function(){
		personGrid.setDataList(personData.slice(personGridPaginator.page.getPageBegin()-1, personGridPaginator.page.getPageEnd()));
		personGrid.renderGrid();
	}

	
// 	var viewPersonRow = new GridRow(templateLoader.loadTemplate("view"), null);
// 	viewPersonRow.gridRowContainer = templateLoader.loadTemplate("view");
// 	viewPersonRow.mouseOverClass = "overContext";
	
// 	viewPersonRow.renderGridRow();
					
// 	var editPersonRow = new GridRow(templateLoader.loadTemplate("edit"), null);
// 	editPersonRow.gridRowContainer = templateLoader.loadTemplate("edit");
// 	editPersonRow.mouseOverClass = "overContext";
	
// 	editPersonRow.renderGridRow();
	
	personGrid.onGridRowRender = function(gridRow){
		var contextMenu = new ContextMenu(templateLoader.loadTemplate("personGridContextMenu"));
		gridRow.setContextMenu(contextMenu);
	}

	personGrid.onGridRowSelect = function(gridRow){
		personGrid.selectedGridRow = gridRow;
	};
	
	personGrid.renderGrid();
	
	sort = new Sort("sortAsc", "sortDesc");
	sort.sort(SortTypes().ascending, document.getElementById("idHeader"));
	
	gridHeader = new GridHeader(document.getElementById("gridHeaderContainer"), personGrid); 
	gridHeader.addHeaderCell(document.getElementById("idHeader"), new SortDataType().numeric);
	gridHeader.addHeaderCell(document.getElementById("nameHeader"), new SortDataType().alphanumeric);
	gridHeader.addHeaderCell(document.getElementById("addressHeader"), new SortDataType().alphanumeric);
	gridHeader.addHeaderCell(document.getElementById("ageHeader"), new SortDataType().numeric);
	gridHeader.addHeaderCell(document.getElementById("dateOfBirthHeader"), new SortDataType().date);

	var thisGridHeader = gridHeader;
		 
	gridHeader.onSort = function(){
		sortHeader(this.getSortedHeaderCell().headerCellTemplate);
		gridHeader.getSortedHeaderCell().sortType = sort.sortType;
		personData = personData.sort(personDataCompaire);
		personGridPaginator.onPageChange();
		
	};
	
}


function personDataCompaire(person1, person2){
	return gridHeader.getSortedHeaderCell().dataCompaire(person1, person2);
}

window.onload = init;
</script>

<script type="text/javascript">
function sortHeader(headerElement){
	var sortType = new SortTypes().descending;
	
	if (sort.sortType == new SortTypes().descending){
		sortType = new SortTypes().ascending;
	}
	
	sort.sort(sortType, headerElement);
}
</script>

</head>
<body>

<!-- <div id="formContainer" style= "width:100%; height:90%; position:absolute; top:0; left:0; z-index:12340; display:none;"></div> -->

<div style="border:#585858 1px solid; width:750px; height:220px; cursor:default;"> 
	<div id="gridHeaderContainer" class="gridHeader">
		<div class="gridHeader" style="width:47px;" id="idHeader"><div class="gridHeader2" style="width:43px;" onclick="//sortHeader(this)">ID</div></div>
		<div class="gridHeader" style="width:197px;" id="nameHeader"><div class="gridHeader2" style="width:193px;" onclick="//sortHeader(this)">Name</div></div>
		<div class="gridHeader" style="width:185px;" id="addressHeader"><div class="gridHeader2" style="width:181px;" onclick="//sortHeader(this)">Address</div></div>
		<div class="gridHeader" style="width:90px;" id="ageHeader"><div class="gridHeader2" style="width:86px;" onclick="//sortHeader(this)">Age</div></div>
		<div class="gridHeader" style="width:200px;" id="dateOfBirthHeader"><div class="gridHeader2" style="width:190px;" onclick="//sortHeader(this)">Date Of Birth</div></div>
	</div>
		
	<div id="personGridContainer" class="gridRowsContainer" style="width:750px; height:200px;    /*border: red 1px solid;*/">
	
	</div>
</div>
 
 	<div id="personGridPaginator" style="width:750px; height:25px; border: 1px solid; text-align: center;">
		<div style="float:left;" title="First Page"><button id="firstPage" style="width:20px;height:20px; background:transparent; border:0px; background-image: url(/M2MJS/icons/first-page.png); background-position: right; background-repeat: no-repeat;"></button></div>
		<div style="float:left;" title="Previous Page"><button id="previousPage" style="width:20px;height:20px; background:transparent; border:0px; background-image: url(/M2MJS/icons/previous-page.png); background-position: right; background-repeat: no-repeat;"></button></div>
	
		<div style="float:left;width:425px; /*border:red 1px solid;*/"><input style="border:1px solid;" id="currentPage" maxlength="3" type="text" size="3" /> / <input style="border:1px solid;" id="totalPages" type="text" size="3" readonly="readonly" /></div>
		
		<div style="float:right;" title="Last Page"><button id="lastPage" style="width:20px;height:20px; background:transparent; border:0px; background-image: url(/M2MJS/icons/last-page.png); background-position: right; background-repeat: no-repeat;"></button></div>
		<div style="float:right;" title="Next Page"><button id="nextPage" style="width:20px;height:20px; background:transparent; border:0px; background-image: url(/M2MJS/icons/next-page.png); background-position: right; background-repeat: no-repeat;"></button></div>
	</div>

</body>
</html>